<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link rel="stylesheet" href="css/style.css">
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/iscroll.js"></script>
	<title>上拉加载更多</title>
</head>
<body>
	<header>这是头部</header>
	<div id="wrapper">
		<div class="scroller">
			<ul>
				<li>你就是一个天才1</li>
				<li>你就是一个天才2</li>
				<li>你就是一个天才3</li>
				<li>你就是一个天才4</li>
				<li>你就是一个天才5</li>
				<li>你就是一个天才1</li>
				<li>你就是一个天才2</li>
				<li>你就是一个天才3</li>
				<li>你就是一个天才4</li>
				<li>你就是一个天才5</li>
			</ul>
			<div class="more"><i class="pull_icon"></i><span>加载更多...</span></div>
		</div>
	</div>
	<footer>这是底部</footer>
	<script>
		var myscroll = new iScroll("wrapper",{
			onScrollMove:function(){
				if (this.y<(this.maxScrollY)) {
					$('.pull_icon').addClass('flip');
					//$('.pull_icon').removeClass('loading');
					//$('.more span').text('释放加载...');
				}else{
					$('.pull_icon').removeClass('flip');
					//$('.more span').text('加载更多...')
				}
			},
			onScrollEnd:function(){
				if ($('.pull_icon').hasClass('flip')) {
					//$('.pull_icon').addClass('loading');
					$('.more span').text('正在加载...');
					pullUpAction();
				}
			},
			onRefresh:function(){
				$('.more').removeClass('flip');
				$('.more span').text('加载更多...');
			}
		});
		function pullUpAction(){
			setTimeout(function(){
				$.ajax({
					url:'../iscroll_V4.2.5/json/ay.json',
					type:'get',
					dataType:'json',
					success:function(data){
						// for (var i = 0; i < 5; i++) {
						// 	$('.scroller ul').append(data);
						// }
						if(data == ''){
							alert('a');
							$('.more span').text('没有更多了...');
						}else{
							$('.scroller ul').append(data);
						}
						myscroll.refresh();
					},
					error:function(){
						console.log('error');
					},
				})
				// for (var i = 0; i < 5; i++) {
				// 	$('.scroller ul').append("<li>一只将死之猿!</li>");
				// }
				myscroll.refresh();
			}, 1000)
		}
		if ($('.scroller').height()<$('#wrapper').height()) {
			$('.more').hide();
			myscroll.destroy();
		}
	</script>
</body>
</html>